<template>
  <div class="app-wrap">
    {{ message }}
    <dict-select v-model:value="message" url="user_name"></dict-select>
    <my-table :tableStyle="{ height: 400 }" :tableItem="tableItem" :tableData="tableData" @edit="handleEdit"
      @delete="handleDelete">
      <template #buttons="{ row }">
        <el-button type="primary" size="small" @click="handleDetail(row)">打开详情页</el-button>
        <el-button type="primary" size="small" @click="handlePrint(row)">打印</el-button>
      </template>
    </my-table>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import define from 'utils/define';

const tableItem = ref({
  columns: [
    {
      label: 'Name',
      prop: 'name',
    },
    {
      label: 'Age',
      prop: 'age',
    },
    {
      label: 'Address',
      prop: 'address',
      // width: 300   //  局部配置
    },],
  options: { //  整体样式配置
    width: 300,
  }
});

const tableData = ref([
  {
    name: 'John',
    age: 18,
    address: 'New York No. 1 Lake Park',
    date: '2016-10-03',
  },
  {
    name: 'John',
    age: 18,
    address: 'New York No. 1 Lake Park',
    date: '2016-10-03',
  }]);

  const message = ref('');

//  methods
const handleDelete = (row) => {
  console.log(row);
}

const handleEdit = (row) => {
  console.log(row);
}

const handleDetail = (row) => {
  console.log(row);
  console.log('打开详情页');
}

const handlePrint = (row) => {
  //  通过 iframe 打印
  const oIframe = document.createElement('iframe');
  oIframe.style.display = 'none';
  document.body.appendChild(oIframe);
  oIframe.src = '/print/index.html';

  //  给点配置信息
  oIframe.contentWindow.name = JSON.stringify({
    url: define.baseUrl + '/dataList',
    data: {
      pageNum: 1,
      pageSize: 10
    },
    headers: {
      Authorization: '1234567890' //  设置token
    }
  });
}

</script>